<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
<div>
          <el-checkbox-group v-model="checkboxVal">
            <el-checkbox class="col_check" v-for="(v,i) in formTheadOptions" :key="i" :label="v.field">{{v.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table size="mini" :data="mtb.data" v-loading.body="listLoading" border style="width: 100%"
                  highlight-current-row>
          <el-table-column v-for="(v,i) in mtb.columns" align="center" :key="i" :prop="v.field" :label="v.title"
                           :align="v.align" :width="v.width">
            <template slot-scope="scope">
              <span>{{scope.row[v.field]}}</span>
              <!--<span v-else @dblclick="handleUpdate(scope.row,scope.$index,true)">{{scope.row[v.field]}}</span>-->
            </template>
          </el-table-column>
          <!--<el-table-column fixed="right" label="操作" width="100">-->
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <button id="ebtn" @click="handleUpdate(scope.row)"
                      :class="scope.row.isSet?'el-tag el-tag--mini el-tag--success':'el-tag el-tag--mini'"
                      style="cursor: pointer;">
                {{scope.row.isSet?'保存':"修改"}}
              </button>
              <button @click="handleDelete(scope.row)" class="el-tag el-tag--danger el-tag--mini"
                      style="cursor: pointer;">
                删除
              </button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {disableBtn, df, $err, $suc, ERRS, SUCS, $msg} from '@/utils'
  import {fetchGet, createOne, deleteOne, deletePost, getOne, rolesAll, updateOneNoId} from '@/api/common'

  const _ = require('lodash');
  //https://www.jianshu.com/p/79f39f2c1382
  //https://www.jianshu.com/p/33175c3a6ba4
  export default {
    name: 'tablecom2',
    props: {
      list: Array,
      columns: Array,
      listLoading: Boolean,
    },
    data: function () {
      return {
        count: 1,
        mtb: {
          data: this.list, //数据
          sel: null,//选中行
          columns: this.columns,// columns: [{edit:false, field: "name", title: "名称", width: 50 ,align:"center" }, ]
        },
        temp: {},

        key: 1,// table key
        // formTheadOptions: ['apple', 'banana', 'orange'],
        formTheadOptions: [], //选择项
        formTheadval: [], //选择值
        defaultFormThead: [], //默认选中值
        checkboxVal: [], // 当前多选选中 checkboxVal
        formThead: [] // thead关联表中当前显示的col

      }
    },

    watch: {
      list(newdata) {
        this.mtb.data = newdata;
      },
      checkboxVal(valArr) {
        console.log(valArr);
        console.log(this.mtb.columns);
        this.mtb.columns = this.columns.filter((i) => {
          return valArr.indexOf(i.field) >= 0
        })
        this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }

    },
    mounted() {
      /*    document.oncontextmenu = function(){
            return false;
          }*/
      //取出列
      this.formTheadOptions = this.columns.map((v) => {
        return {field: v.field, title: v.title}
      });
      // this.formTheadOptions=[ {field:v.field,title:v.title}];
      this.defaultFormThead = this.formTheadOptions.map(v => v.field); //默认全选中值
      this.checkboxVal = this.defaultFormThead
      // this.formThead=this.columns.filter((v) => this.checkboxVal.indexOf(v.field) >= 0);

    },

    methods: {

      //删除
      handleDelete(row) {
        this.$msgbox({
          message: '确定要删除该层级及所有子级吗? 该操作不可逆,请谨慎操作!!!',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(action => {
          deleteOne('codeExplains', {id: row.id}).then(res => {
            if (res.data.code === 0) {
              $suc('删除成功!')
              this.$parent.getList();
            } else {
              ERRS(res.data.message)
            }
          })
        });
      },

      //详情修改
      handleUpdate(row, cancel = false) {
        return;

      },


    }
  }
</script>

<style scoped>
  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }

</style>
